<style>
	.chart_title { width: 100%; height: 45px; line-height: 45px; font-size: 16px; font-weight: bold; text-align: center; margin-top: 20px 0; }
	.chart { width: 100%; height: 50vw; border: 1px solid lightgrey; margin-bottom: 20px; font-size: 8px;}
</style>
<div id="container">
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-left-nav mui-pull-left" id="return"></a>
		<h1 class="mui-title">健康贡献</h1>
	</header>
	<div class="mui-content" id="vm">

		<div class="chart_conditions">
			<div class="lines">
				<div class="labels">统计对像：</div>
				<div class="inputs" id="pick_target" :pick_target="pick_target" :target_type="target_type" >{{target_name}}</div>
			</div>
		</div>

		<article class="charts ">
			<div class="gymTitle"><span class="gymName"></span><span class=""></span></div>

			<div class="chart_title">续课健康贡献占比</div>
			<div class="chart" id="income_xk_rate"></div>

			<div class="chart_title">体验课与新增健康贡献</div>
			<div class="chart" id="ty_income"></div>

			<div class="chart_title">活跃度、上课人次与续课健康贡献</div>
			<div class="chart" id="av_times_xk"></div>
		</article>

	</div>
</div>
<script>



var vm = new Vue({
	el: "#vm",
	data: {
		pick_target: 0,
		target_type: 'region',
		target_name: ''
	},
	
})

// 显示所有图表
vm.$watch('target_name', function(){
	
	if(! vm.target_name){
		alert ("请选择门店！");
		return ;
	}

	// 返回首页按钮监听
	$("#return").on("tap", function(){
		rd.navito("pages", "homepage");
	})

	$.get(dataDomain + "getData.php", {do: 'getIncomes', gymName: vm.target_name}, function(r){
		console.log(r);
		
		// 图2，先创建一个空的数据结构模型
		let option_xk_rate = rd.chart_option.createNew(); // $.extend(true, {}, option_base);
		
		option_xk_rate.add_series([
			{name: '新增健康贡献', type: 'bar'},
			{name: '续课健康贡献', type: 'bar'},
			{name: '续课健康项献占比', type: 'line'}
		])
		$.extend(true, option_xk_rate.option.yAxis, [{name: '万元'}, {name: '%'}]);
		option_xk_rate.option.series[2].yAxisIndex = 1; 
		// console.log(option_xk_rate)
		var k = {xAxis:[{data:[]}], series:[{data:[]}, {data:[]}, {data:[]}]};
		for(var i in r){
			var x = r[i];
			k.xAxis[0].data[i] = x.mon;
			k.series[0].data[i] = (Number(x.total_fee) / 10000).toFixed(4);
			k.series[1].data[i] = Number(x.xk_fee / 10000).toFixed(4);
			k.series[2].data[i] = Number(x.total_fee) ? (Number(x.xk_fee) / Number(x.total_fee) * 100).toFixed(2) : 0;
		}
		// 再把数据拼进option
		$.extend(true, option_xk_rate.option, k);
		
		// 为日期型的xAxis配上显示格式,一月显示年,其他月份只显示月
		option_xk_rate.month_format();
		
		option_xk_rate.option.dataZoom[0].startValue = i - 10;
		var chart_xk_rate = echarts.init(document.getElementById('income_xk_rate'));
		chart_xk_rate.setOption(option_xk_rate.option);
		

		// 图3，先创建一个空的数据结构模型
		let option_ty_income = rd.chart_option.createNew();
		option_ty_income.add_series([
			{name: '体验课', type: 'line'},
			{name: '新增健康贡献', type: 'bar'},
			{name: '总健康贡献', type: 'bar'}
		])

		$.extend(true, option_ty_income.option.yAxis, [{name: '万元'}, {name: '%'}]);
		option_ty_income.option.series[0].yAxisIndex = 1; 
		
		var k = {xAxis:[{data:[]}], series:[{data:[]}, {data:[]}, {data:[]}]};
		for(var i in r){
			var x = r[i];
			k.xAxis[0].data[i] = x.mon;
			k.series[0].data[i] = 0;
			k.series[1].data[i] = Number(x.zh_fee / 10000).toFixed(4);
			k.series[2].data[i] = Number(x.total_fee / 10000).toFixed(4);
		}
		// 再把数据拼进option
		$.extend(true, option_ty_income.option, k);
		option_ty_income.month_format();
		// console.log(option_ty_income)
		option_ty_income.option.dataZoom[0].startValue = i - 10;
		var chart_ty_income= echarts.init(document.getElementById('ty_income'));
		// chart_ty_income.setOption(option_ty_income.option);

		// 图4，先创建一个空的数据结构模型
		let option_av_times_xk = rd.chart_option.createNew();
		option_av_times_xk.add_series([
			{name: '总健康贡献', type: 'bar'},
			{name: '上课人次', type: 'bar'},
			{name: '活跃度', type: 'line'},
		])
		$.extend(true, option_av_times_xk.option.yAxis, [{name: '万元'}, {name: '人次'}, {name: '%'}]);
		option_av_times_xk.option.series[1].yAxisIndex = 1; 
		option_av_times_xk.option.series[2].yAxisIndex = 2; 
		option_av_times_xk.option.yAxis[2].offset = -20;
		
		var k = {xAxis:[{data:[]}], series:[{data:[]}, {data:[]}, {data:[]}]};
		for(var i in r){
			var x = r[i];
			k.xAxis[0].data[i] = x.mon;
			k.series[0].data[i] = Number(x.xk_fee / 10000).toFixed(2);
			k.series[1].data[i] = 0
			k.series[2].data[i] = 0
		}
		// 再把数据拼进option
		$.extend(true, option_av_times_xk.option, k);
		option_av_times_xk.month_format()

		option_av_times_xk.option.dataZoom[0].startValue = i - 10;
		var chart_av_times_xk= echarts.init(document.getElementById('av_times_xk'));

		// 为option补充数据，需要异步获取另一组数据
		$.get(dataDomain + 'getData.php', { do: 'getGymMonths', gymName: vm.target_name}, function(r2){
			console.log(r2);
			for(var j in r2){
				for(var i in r){
					if(r2[j].mon == r[i].mon){
						var total_users = Number(r2[j].usersCount) + Number(r2[j].newUsersCount);
						// console.log(total_users);
						// console.log(Number(r2[j].classesUsersCount))
						option_av_times_xk.option.series[1].data[i] = Number(r2[j].classesCount).toFixed(0);
						option_av_times_xk.option.series[2].data[i] = total_users && Number(r2[j].classesUsersCount) ? (Number(r2[j].classesUsersCount) / total_users * 100).toFixed(2) : 0;
						// console.log(option_av_times_xk.series[0].data[i])
						
						option_ty_income.option.series[0].data[i] = Number(r2[j].ty_classesCount).toFixed(0);
					}
				}
			}
			chart_ty_income.setOption(option_ty_income.option);
			chart_av_times_xk.setOption(option_av_times_xk.option);
		}, 'json');
		
		// 将3个图的X轴控制绑定，同步缩放
		echarts.connect([chart_xk_rate, chart_ty_income, chart_av_times_xk]);

	}, 'json')
})

vm.target_name = "全国";
	
// 设置三级联选，选择地区或门店。 -- 引用自pub_func.js。
picker_choose_gym();
	

</script>